<template>
  <div class="no-select">
    <div class="title">
      我的{{description}}字段 <span>{{hasFixed && '点击左上角可冻结/解冻，' || ''}}点击右上角可移除，可拖动排序</span>
    </div>
    <!--使用draggable组件-->
    <VueDraggable
      v-model="currentCheckedColumns"
      chosenClass="chosen"
      forceFallback="true"
      animation="500"
      :move="onMove"
      :handle="'.mover'"
      @start="onStart"
      @end="onEnd"
    >
      <div class="item" v-for="item in currentCheckedColumns" :key="item">
        <transition-group>
          <div class="item-contain" :class="{'mover': !lockedColumns.includes(item)}" :key="item">
            {{ item }}
          </div>
        </transition-group>
        <el-icon class="el-icon-minus" v-show="!lockedColumns.includes(item)" @click="removeClick(item)"><Minus /></el-icon>
        <el-icon :class="lockedColumns.includes(item) ? 'el-icon-lock' : 'el-icon-unlock'" v-if="hasFixed" @click="() => { !lockedColumns.includes(item) ? lock(item) : unlock(item)}">
          <Lock v-if="lockedColumns.includes(item)" />
          <Unlock v-else />
        </el-icon>
      </div>
    </VueDraggable>
    <div class="title">更多{{description}}字段</div>
    <div class="list">
      <div class="item" v-for="element in unCheckedColumns" :key="element">
          <div class="item-contain-more" :key="element">
            {{ element }}
            <el-icon @click="addClick(element)"><Plus /></el-icon>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
//导入draggable组件
import { VueDraggable } from 'vue-draggable-plus'
export default {
  components: {
    VueDraggable,
  },
  props: {
    description: {
      default: "列表",
    },
    checkedColumns: {
      type: Array,
      default: []
    },
    columns: {
      type: Array,
      default: []
    },
    lockedColumnsName: {
      type: String,
      default: 'lockedColumns'
    },
    hasFixed: {
      default: true,
    },
  },
  computed: {
    unCheckedColumns() {
      let arr = []
      this.columns.forEach(item => {
        if (!this.currentCheckedColumns.includes(item)) {
          arr.push(item);
        }
      })
      return arr
    }
  },
  watch: {
    checkedColumns(val) {
      this.currentCheckedColumns = [...val]
    }
  },
  data() {
    return {
      currentCheckedColumns: [...this.checkedColumns],
      drag: false,
      lockedColumns: JSON.parse(localStorage.getItem(this.lockedColumnsName)) || []
    };
  },
  mounted() {
    this.currentCheckedColumns = this.currentCheckedColumns.filter(item => this.columns.includes(item))
  },
  methods: {
    setLocalStorage() {
      localStorage.setItem(this.lockedColumnsName, JSON.stringify(this.lockedColumns));
    },
    lock(col) {
      if (this.lockedColumns.length === 6) {
        this.tipMessage('可固定列最多为六列', 'warning')
        return
      }
      // 找到锁住的项
      let temCutColumns = this.currentCheckedColumns.splice(this.currentCheckedColumns.indexOf(col), 1).join(',');
      // 找到被锁住的最后一项
      let lastLockedColumns = this.lockedColumns.slice(-1).join(',');
      let lastIndex = this.currentCheckedColumns.indexOf(lastLockedColumns);
      // 如果没有被锁住的，则在最前面插入
      lastIndex = lastIndex == -1 ? 0 : lastIndex + 1 ; 
      // 在被锁住的最后一项后 插入最新被锁住的
      this.currentCheckedColumns.splice(lastIndex,0,temCutColumns)
      this.lockedColumns.push(col);
    },
    unlock(col) {
      let lockedIndex = this.lockedColumns.indexOf(col)
      let temCutLockedColumns = this.lockedColumns.splice(lockedIndex, 1).join(',');
      this.currentCheckedColumns.splice(this.currentCheckedColumns.indexOf(col),1)
      this.currentCheckedColumns.splice(this.lockedColumns.length,0,temCutLockedColumns);
    },
    onMove(e) {
      if (this.lockedColumns.includes(e.draggedContext.element) || this.lockedColumns.includes(e.relatedContext.element)) {
        return false
      }
      return true
    },
    // 添加项
    addClick(col) {
      this.currentCheckedColumns.push(col);
    },
    // 移除
    removeClick(col) {
      this.currentCheckedColumns.splice(this.currentCheckedColumns.indexOf(col), 1)
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd(e) {
      this.drag = false;
    },
  },
};
</script>

<style scoped lang='less'>
.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* Standard syntax */
}
.item {
  display: inline-block;
  width: fit-content;
  position: relative;
  margin-bottom: 10px;
  margin-right: 15px;
  .el-icon-minus {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    transform: translate(50%,-50%);
    width: 14px;
    height: 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f56c6c;
    cursor: pointer;
  }
   .el-icon-unlock {
    display: none;
  }
  .el-icon-lock {
    background: #909399;
    z-index: 999;
  }
  .el-icon-unlock {
   background:#E6A23C;
   z-index: 999;
  }
  .el-icon-lock,
  &:hover .el-icon-unlock {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    transform: translate(-50%,-50%);
    width: 14px;
    height: 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    // background: #E6A23C;
    cursor: pointer;
  }
}
/*被拖拽对象的样式*/
.item-contain,.item-contain-more {
  padding: 8px 10px;
  background-color: #fff;
  border: solid 1px #eee;
  // margin-bottom: 10px;
  // margin-right: 15px;
  cursor: not-allowed;
}
.mover {
  cursor: move;
}


.item-contain {
  position: relative;
  .el-icon-minus {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    transform: translate(50%,-50%);
    width: 14px;
    height: 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f56c6c;
    cursor: pointer;
  }
   .el-icon-unlock {
    display: none;
  }
  .el-icon-lock {
    background: #909399;
    z-index: 999;
  }
  .el-icon-unlock {
   background:#E6A23C;
   z-index: 999;
  }
  .el-icon-lock,
  &:hover .el-icon-unlock {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    transform: translate(-50%,-50%);
    width: 14px;
    height: 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    // background: #E6A23C;
    cursor: pointer;
  }
}

.item-contain-more {
  // margin-bottom: 10px;
  // margin-right: 15px;
  position: relative;
  cursor:default;
  :deep(i) {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    transform: translate(50%,-50%);
    width: 14px;
    height: 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #409eff;
    // background: #67c23a;
    cursor: pointer;
  }
}
.title {
  font-weight: 700;
  color: #000;
  font-size: 17px;
  margin-bottom: 15px;
  span {
    font-weight: 400;
    color: #aaa;
    font-size: 12px;
  }
}
/*选中样式*/
.chosen {
  // border: solid 2px #3089dc !important;
}
</style>
